<!-- 培训静态页面 -->
<template>
  <div class="page-content">
    <el-carousel class="carousel" arrow="always">
      <el-carousel-item
        class="carouselItem"
        v-for="(item, index) in bannerList"
        :key="'banner' + index"
      >
        <div class="bannaerItemBox">
          <img
            class="bannerItem"
            :src="item"
            alt=""
            srcset=""
          />
        </div>
        <div class="basePageBox btnBox">
          <el-button
            class="customBtn allBtn"
            type="primary"
            @click="toAll"
          >
            全部培训
          </el-button>

          <el-button
            v-if="isLogin && isORG"
            class="customBtn addBtn"
            type="primary"
            @click="toAdd"
          >
            创建培训
          </el-button>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="basePageBox">
      <div class="pageTitle">
        <div class="duanLine"></div>
        <div class="changLine"></div>
        <div class="title">产品介绍</div>
        <div class="changLine"></div>
        <div class="duanLine"></div>
      </div>
      <div class="pageList">
        <div class="listItem" v-for="(item, index) in pageList" :key="index" @click="toVideoPlay(item)">
          <img class="coverUrl" :src="item.coverUrl" />
          <div class="listName">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken, getUserInfo } from '@/utils/auth'
export default {
  data() {
    return {
      bannerList: [
        require('@/assets/static/培训banner.png')
      ],
      pageList: [
        {
          coverUrl: require('@/assets/static/培训计划.png'),
          name: '发布培训计划',
          id: window.baseConfig.trainningVideoId1
        },
        {
          coverUrl: require('@/assets/static/用户参与.png'),
          name: '用户预约参与',
          id: window.baseConfig.trainningVideoId2
        },
        {
          coverUrl: require('@/assets/static/开展培训.png'),
          name: '开展培训',
          id: window.baseConfig.trainningVideoId3
        },
      ],
    };
  },
  computed: {
    isLogin() {
      return !!getToken();
    },
    isORG() {
      return getUserInfo()?.role === 'ORG';
    }
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    toVideoPlay(item) {
      const url = this.$router.resolve({
        path: '/trainingVideoDetails',
        query: {
          videoId: item.id,
          name: item.name
        }
      }).href;
      window.open(url, '_blank');
    },
    toAll() {
      this.$router.push({
        path: '/trainingStatic',
      });
    },
    toAdd() {
      this.$router.push({
        path: '/trainingStatic',
        query: { status: 'add' },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding-bottom: 56Px;
  .carousel {
    width: 100%;
    height: 480px;
    margin: 0;
    // 内容区
    ::v-deep .el-carousel__container {
      height: 100%;
      .el-carousel__arrow {
        display: none;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: $box-shadow-secondary;
      }
    }
    // 指示器
    ::v-deep .el-carousel__indicators {
      display: none;
      position: absolute;
      bottom: 28px;
      .el-carousel__indicator button {
        width: 80px;
        height: 6px;
        background: #fff;
        opacity: 0.4;
      }
      .el-carousel__indicator.is-active button {
        opacity: 1;
      }
    }
    .carouselItem {
      width: 100%;
      height: 100%;
      .bannaerItemBox {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        .bannerItem {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .btnBox {
        z-index: 99;
        margin-top: -100px;
        padding-left: 40px;
      }
      .addBtn {
        margin-left: 20px;
      }
    }
  }
  .pageTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40Px auto 20Px;
    .duanLine {
      width: 2Px;
      height: 6Px;
      background: #ADC8FF;
      border-radius: 2Px;
      margin: 0 2Px;
    }
    .changLine {
      width: 2px;
      height: 10Px;
      background: #6E9EFF;
      border-radius: 2Px;
    }
    .title {
      margin: 0 15Px;
      color: #4E586D;
      font-size: 24Px;
      font-weight: 600;
    }
  }
  .pageList {
    display: grid;
    gap: 18Px;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    .listItem {
      cursor: pointer;
    }
    .listName {
      width: 100%;
      line-height: 28Px;
      margin-top: 12Px;
      font-size: 16Px;
      color: #222;
    }
  }
}
</style>
